/* eslint-disable react/react-in-jsx-scope */

// eslint-disable-next-line no-unused-vars
import { getArticleList, getNewList } from '@/store/actions/home'
import { RootState } from '@/types/store'
// eslint-disable-next-line no-unused-vars
import { InfiniteScroll, PullToRefresh } from 'antd-mobile'

import { useEffect } from 'react'
import { useDispatch, useSelector } from 'react-redux'
import ArticleItem from '../ArticleItem/ArticleItem'

import styles from './index.module.scss'
type Props ={
    // eslint-disable-next-line camelcase
    channel_id:number
}
// eslint-disable-next-line camelcase
const ArticleList = ({ channel_id }:Props) => {
  const dispatch = useDispatch()
  useEffect(() => {
    // dispatch(getArticleList(channel_id, Date.now()))
  // eslint-disable-next-line camelcase
  }, [])
  // eslint-disable-next-line no-unused-vars
  const { articles, timestamp } = useSelector((state:RootState) => {
    const t = state.home.channelArticles[channel_id]
    return t || { articles: [] }
  })

  // eslint-disable-next-line no-unused-vars
  //   const { articles = [], timestamp } = channelArticles[channelId] || {}
  // 判断是否有更多数据
  //   const hasMore = timestamp !== null
  // 必须返回一个promise对象
  const loadMore = async () => {
    console.log('加载更多数据')
    await dispatch(getArticleList(channel_id, timestamp || Date.now()))
  }
  //   下拉刷新
  const onRefresh = async () => {
    // 重置当前频道的数据，重新加载第一页的数据
    await dispatch(getNewList(channel_id))
  }
  return (
    <div className={styles.root}>
      {/* 文章列表中的每一项 */}
      <PullToRefresh onRefresh={onRefresh}>
        { articles.map(item => (<div key={item.art_id} className="article-item">
           <ArticleItem article={item} />
         </div>))
        }
          {/* 无限加载组件 */}
          <InfiniteScroll loadMore={loadMore} hasMore={articles.length < 50}></InfiniteScroll>
     </PullToRefresh>
    </div>
  )
}

export default ArticleList
